<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">渠道\类型规模(亿元)</div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="channelSize"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "channelSize",
        data(){
            return{
                number: 0,
                time:null,
                option:{
                    color: ['#a9e1f0', '#f9e08d', '#f3aec8','#94c19d'],
                    legend: {
                        textStyle:{
                            fontSize: 18,//字体大小
                            color: '#a9e1f0'//字体颜色
                        },
                        // inactiveColor:'red',
                        // ativeColor:'blue'
                    },
                    tooltip: {
                        trigger: 'axis',
                        showContent: true
                    },
                    dataset: {
                        source: [
                            ['product', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09'],
                            ['广发银行', 1199.256, 1181.82, 980.44, 1494.19, 1400.43, 1401.49],
                            // ['广发银行', {value:41.1}],
                            ['直销系统', 599.63, 666.12, 666.12, 689.63, 700.22,885.15],
                            ['支付宝', 99.94, 128.93, 217.88, 91.95, 135.53,98.35],
                            ['银河证券', 99.94, 171.9, 261.45, 22.99, 22.59,73.76],
                        ]
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        gridIndex: 0,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    grid: {top: '55%'},
                    series: [
                        {
                            type: 'line', smooth: true, seriesLayoutBy: 'row',
                        },
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '25%',
                            center: ['50%', '30%'],
                            label: {
                                // formatter: '{b}: {@2020-04} ({d}%)'
                                formatter:function (data) {
                                    console.log(data)
                                }
                            },
                            encode: {
                                itemName: 'product',
                                value: '2020-04',
                                tooltip: '2020-04'
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            this.getEchart();
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('channelSize'));
                myChart.on('updateAxisPointer', function (event) {
                    var xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        var dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });

                myChart.setOption(this.option, true);
                this.timer = setInterval(() => {
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: this.number
                    });

                    this.number++;

                    if (this.number > 7) {
                        this.number = 0;
                    }
                }, 3000);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 1000px;
        top: 700px;
        width: 870px;
        height: 400px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
</style>